<template>
	<div class="common-layout">
	    <el-container>
			<el-header><Header></Header></el-header>
			<el-main>
				<div v-if="flag==1">
					<h3>
						优惠卷
						<el-button plain @click="addCouponFn" type="primary" v-if='counter.btnsObj.addFlag'>
							{{counter.btnsObj.addName}}
						</el-button>
					</h3>
					<div class="fomeflex">
						<el-form-item label="优惠卷名称">
							<el-input
							  v-model="input"
							  style="width: 210px;height: 36px;"
							  size="large"
							  placeholder="请输入优惠卷名称"
							/>
						</el-form-item>
						<el-button type="primary" v-model="input" @click="searchCoupon">搜索</el-button>
						<el-button type="plain" @click="clearContentFn">重置</el-button>
					</div>
					<el-table :data="tableData" style="width: 100%" height="54vh">
						<el-table-column prop="couponName" label="名称"></el-table-column>
						<el-table-column prop="couponType" label="类型"></el-table-column>
						<el-table-column prop="couponMoney" label="面值"></el-table-column>
						<el-table-column prop="couponManual" label="是否手动领取"></el-table-column>
						<el-table-column prop="couponNumber" label="发放数量"></el-table-column>
						<el-table-column prop="couponUsed" label="已领用/已使用"></el-table-column>
						<el-table-column prop="couponCondition" label="使用门槛"></el-table-column>
						<el-table-column label="有效期">
							<template #default="scope">
								<span v-if="scope.row.couponUsedtime != ''">领取之日起{{scope.row.couponUsedtime}}天内有效</span>
								<span v-else>有效期至{{scope.row.fixedTime}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="couponReceivetime" label="领取时间">
							<template #default="scope">
								<span v-if="scope.row.couponReceivetime != '不限时'">截止至{{scope.row.couponReceivetime}}</span>
								<span v-else>{{scope.row.couponReceivetime}}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="200">
							<template #default='scope'>
								<!-- <el-button type="primary" @click="promoteCouponFn(scope.row)">推广</el-button> -->
								<a class="mya" @click="updateCouponFn(scope.row)">编辑</a>
								<a class="mya" @click="delCouponFn(scope.row.couponId)">删除</a>
								<a class="mya" @click="getCouponFn(scope.row)">领取记录</a>
								<!-- <el-button plain @click="updateCouponFn(scope.row)">编辑</el-button>
								<el-button type="danger" @click="delCouponFn(scope.row.couponId)">删除</el-button>
								<el-button type="primary" @click="getCouponFn(scope.row)">领取记录</el-button> -->
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						layout="prev,pager,next"
						:page-size="pageSize"
						:page-count="pageCount"
						v-model:current-page="pageIndex"
						@current-change="changePage"
					></el-pagination>
				</div>
				<AddCoupon v-if="flag==2" @update-message="handleMessageUpdate"></AddCoupon>	
				<GetCoupon v-if="flag==3" :getnum="getted" :dataid="valueid" @update-message="handleMessageUpdate"></GetCoupon>
			</el-main>
			
	    </el-container>
	</div>
	<!-- 删除确定框 -->
	<el-dialog
	    v-model="dialogVisible"
	    title="提示"
	    width="500"
	  >
	    <span>确定删除吗</span>
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogVisible = false">取消</el-button>
	        <el-button type="primary" @click="delconfirm">
	          确定
	        </el-button>
	      </div>
	    </template>
	  </el-dialog>
</template>

<script setup>
	import AddCoupon from './AddCoupon.vue';
	import GetCoupon from './GetCoupon.vue';
	import Header from "@/components/Header.vue"
	import { onMounted, ref, reactive,shallowRef} from 'vue';
	import {CouponList,CouponSearch,CouponDelete} from "@/api"
	import { useRouter,useRoute } from 'vue-router';
	import {useCounterStore} from '../stores/counter';
	import { ElMessage } from 'element-plus'
	
	let dialogVisible=ref(false)
	let input = ref('')
	let flag=ref(1)
	let route=useRoute();
	let router=useRouter();
	let counter=useCounterStore();
	let pageCount=shallowRef(0)
	const pageSize=5;
	const pageIndex=shallowRef(1);//当前的页数
	counter.btns=route.meta.btns
	
	function handleMessageUpdate () {
		flag.value = 1;
		searchCoupon()
	}
	
	const tableData=ref([])
	// 列表
	const couponList=async()=>{
		let res = await CouponList({
			pageSize:pageSize,
			pageIndex:pageIndex.value,
		})
		// console.log("res",res)
		tableData.value=res.adminList
		pageCount.value=res.pageCount
	}
	
	// 搜索
	const searchCoupon=async()=>{
		//调用搜索接口；
		let res=await CouponSearch({
			pageSize:pageSize,
			pageIndex:pageIndex.value,
			couponName:input.value
		})
		// console.log(res)
		tableData.value=res.adminList
		pageCount.value=res.pageCount
	}
	
	//点击分页
	const changePage=(page)=>{
		// console.log(page)
		pageIndex.value=page;
		//initBranchList()
		searchCoupon();
	}

	// 重置
	const clearContentFn=()=>{
		input.value=""
		searchCoupon()
	}
	// 添加优惠券
	const addCouponFn=()=>{
		sessionStorage.removeItem("itemCoupon")
		// router.push("/setting/AddMenu")
		flag.value=2
	}
	
	//编辑优惠券
	const updateCouponFn=(item)=>{
		// console.log(item)
		sessionStorage.setItem("itemCoupon",JSON.stringify(item))
		// router.push("/setting/AddMenu")
		flag.value=2
	}
	
	//领取记录
	var valueid;
	var getted;
	const getCouponFn=(item)=>{
		// console.log(item)
		valueid=item.couponId
		getted=item.couponUsed
		flag.value=3
	}
	
	//删除优惠券
	var couponid;
	const delCouponFn=(item)=>{
		couponid=item
		dialogVisible.value=true
		// console.log(couponid)
	}
	// 确定删除
	const delconfirm=async()=>{
		let res=await CouponDelete({
			couponId:couponid
		})
		// console.log("删除结果",res)
		dialogVisible.value=false
		if(res==null){
			ElMessage.success("删除成功")
		}
		searchCoupon()
	}
	
	onMounted(()=>{
		couponList()
	})
</script>
<style scoped lang="less">
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	
	.el-button{
		margin-left: 15px;
	}
	.el-input__wrapper{
		margin-right:15px;
	}
	h3{
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
	}
	.el-table{
		width: 100vh;
	}
	.mya{
		color: #4b5db9;
		margin:0 6px;
		cursor: pointer;
	}
	.fomeflex{
		margin-top: 20px;
		display: flex;
	}
	.cell .el-button{
		margin-left: 3px !important;
		padding: 5px 10px;
		margin-top: 3px;
	}
</style>